import React, { Component } from 'react';
import ReactEcharts from "echarts-for-react";
import "echarts/lib/chart/line";
import "echarts/lib/component/tooltip";
import "echarts/lib/component/title"; // 此处是按需引
import emitter from '../utils/events';

class PolarBar extends React.Component {
    echartRef = {}
    constructor(props) {
        super(props);
        this.state= {
           data:[],
           categories : [],
           realativities: []
        }
    }
    componentDidMount() {
        // 组件装载完成以后声明一个自定义事件
        this.eventEmitter = emitter.addListener(this.props.title, (message) => {
            debugger
            console.log(message)
            let rels = new Array()
            message['relativities'].forEach(x => rels.unshift(x.toFixed(3)))
            this.setState({
                data:message.nodes,
                relativities:rels,
            });
        });
    }
    componentWillUnmount() {
        emitter.removeListener(this.eventEmitter);
    }


    getOption = () =>{
        
        return{
            title: [
              {
                text: this.props.title
              }
            ],
            realtimeSort: true,
            xAxis: {
              show:true,
              type: 'value',
              axisLine:{
                show:true
              },
              
            },
            yAxis: {
              
              type: 'category',
              data: this.state.data,
              
              axisTick:{
                show:false
              },
              axisLabel:{
                show:false
              }
            },  
            grid: [
              {
                top: 50,
                width: '90%',
                bottom: '10%',
                left: 10,
                containLabel: true
              },],
            tooltip: {},
            series: {
              type: 'bar',
              data: this.state.relativities,
            //   data:[2, 1.2, 2.4, 3.6],
              coordinateSystem: 'cartesian2d',
              label: {
                show: true,
                position: 'middle',
                formatter: '{b} : {c}'
              }
            }
          }

    }

    render(){
      
        return(<div style={{textAlign:"left",display:"inline-block",width:"50%",padding:"0px",margin:"0px"}}>
        {this.state.relativities==undefined ? <></> : <ReactEcharts
        ref={e => this.echartRef = e}
          style={{ minHeight: "100%" , width:"100%",padding:"0px",margin:"0px"}}
          option={this.getOption()}
        //   notMerge = {true}
          theme={"theme_name"}
          // onChartReady={this.onChartReadyCallback}
        //   onEvents={EventsDict}
        />}
        </div>)
    }
}

export default PolarBar;